<template>
  <div style="position: relative; z-index: 10;">

   <MulitFileUpload :masterId="props.masterId" v-if="data.srcList.length === 0" @refreshPicture="refreshPicture" @update-url-data="batchSaveUrl"></MulitFileUpload>

    <el-image
        v-if="data.srcList.length !== 0"
        style="width: 100%; height: 100%;"
        :src="data.coverUrl"
        :preview-src-list="data.srcList"
        fit="cover"
        show-progress
        @show="colseTab"
        @close="openTab"
    >
      <template
          #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
      >
        <el-icon @click="prev">
          <Back/>
        </el-icon>
        <el-icon @click="next">
          <Right/>
        </el-icon>
        <el-icon @click="setPicker(activeIndex)">
          <Picture/>
        </el-icon>
        <el-icon @click="setActiveItem(data.srcList.length - 1)">
          <DArrowRight/>
        </el-icon>
        <el-icon @click="actions('zoomOut')">
          <ZoomOut/>
        </el-icon>
        <el-icon
            @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"
        >
          <ZoomIn/>
        </el-icon>
        <el-icon
            @click="
            actions('clockwise', { rotateDeg: 180, enableTransition: false })
          "
        >
          <RefreshRight/>
        </el-icon>
        <el-icon @click="actions('anticlockwise')">
          <RefreshLeft/>
        </el-icon>
        <el-icon @click="reset">
          <Refresh/>
        </el-icon>
        <el-icon @click="download(activeIndex)">
          <Download/>
        </el-icon>
      </template>
    </el-image>

  </div>
</template>

<script setup lang="ts">
import {ElIcon, ElMessage} from 'element-plus'
import {
  Back,
  DArrowRight,
  Download,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Right,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'
import {type PropType, reactive} from "vue";
import {
  batchCreateDetailModePictureApi,
  getDetailModePictureListApi
} from "@/api/modules/detailModel/detailModePicture";
import MulitFileUpload from "@/views/novel/character/components/MulitFileUpload.vue";
import type {DetailModePictureForm} from "@/api/types/detailmodel/detailModePicture";


let data =reactive({
  coverUrl:  '' as string | any,
  srcList:  [] as string[]
})

let props = defineProps({
  masterId: {
    type: Number as PropType<number | any>,
    required: true
  }
});


let refreshPictures = ()=>{
   getDetailModePictureListApi({
    belongId: props?.masterId,
    page: 1,   // 假设默认值为1
    limit: 100, // 假设每页显示10条记录
  }).then(res=>{
    let srcList = res.data.rows;
    data.srcList = srcList.map((item: any) => {return item.pictureId;})
    data.coverUrl = data?.srcList[0] ?? ''
    console.log('pictures11111',data.srcList)
    let coverUrl =  res.data.rows.find(item  => item.isAvatar === '1')?.pictureId
    if (coverUrl){
      data.coverUrl = coverUrl
      data.srcList = data.srcList.filter(item => item !== coverUrl)
    }
  })
}

refreshPictures()


const emits = defineEmits(['setCover'])

//emits('setCover',srcList[activeIndex])
let setPicker = (index : any) =>{
  console.log('爸爸啊爸爸,我是你儿子')
  emits('setCover',data.srcList[index])
}

const download = (index: number) => {
  const url = data.srcList[index]
  const suffix = url.slice(url.lastIndexOf('.'))
  const filename = Date.now() + suffix

  fetch(url)
      .then((response) => response.blob())
      .then((blob) => {
        const blobUrl = URL.createObjectURL(new Blob([blob]))
        const link = document.createElement('a')
        link.href = blobUrl
        link.download = filename
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(blobUrl)
        link.remove()
      })
}

let refreshPicture = ()=>{
  refreshPictures()
}


let batchSaveUrl = (res :any)=>{

  let pictures = res?.data?.map((item:any)=>{
    let form :DetailModePictureForm ={}
    form.belongId =props.masterId
    form.pictureId =item?.url
    form.isAvatar = '0'
    return form
  })
  ElMessage.success('上传成功')
  batchCreateDetailModePictureApi(pictures).then(res=>{
    refreshPictures()
  })
}


let colseTab = ()=>{
  const tabBox = document.querySelector('.tabs-box');
  if (tabBox) {
    tabBox.style.zIndex = '-1';
  } else {
    console.log('未找到 .tabs-box 元素');
  }
}

let openTab = () => {
  const tabBox = document.querySelector('.tabs-box');
  if (tabBox) {
    tabBox.style.removeProperty('z-index');
  } else {
    console.log('未找到 .tabs-box 元素');
  }
};

defineExpose({refreshPictures})
</script>
